<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分析生命周期</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>当前的n值是: {{n}}</h2>
      <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },

        // 此时：数据是新的，但页面是旧的，即：页面尚未和数据保持同步。
        beforeUpdate() {
          console.log("beforeUpdate");
          console.log("n:", this.n);
          // debugger;
        },

        // 根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新。
        // 即完成了 Model → View的更新

        // 此时：数据是新的，页面也是新的，即：页面和数据保持同步。
        updated() {
          console.log("updated");
          console.log("n:", this.n);
          this.n = 99;
          // debugger;
        },
      });
    </script>
  </body>
</html>
